<main>
  <app-content-block width="true" caption="创建覆盖物">
    <div class="overlay-block">
      <div class="drop-item">
        <span>种类</span>
        <div>
          <app-dropdown [options]="typeOptions" [(ngModel)]="selectedType"></app-dropdown>
        </div>
      </div>
      <div class="btn-item">
        <span>坐标拾取</span>
        <button (click)="pickup()">拾取</button>
      </div>
      <div class="input-item">
        <span>坐标</span>
        <div class="coordinate-items">
          <div class="coordinate-item">
            <span>X</span><input (keydown)="onKeyDown($event)" [(ngModel)]="coordinateX" type="number" />
          </div>
          <div class="coordinate-item">
            <span>Y</span><input (keydown)="onKeyDown($event)" [(ngModel)]="coordinateY" type="number" />
          </div>
          <div class="coordinate-item">
            <span>Z</span><input (keydown)="onKeyDown($event)" [(ngModel)]="coordinateZ" type="number" />
          </div>
        </div>
      </div>
      <div class="input-item" *ngIf="selectedType.value === 'Marker'">
        <span>标题</span>
        <input (keydown)="onKeyDown($event)" type="text" [(ngModel)]="title" placeholder="请输入文字" />
      </div>
      <div class="input-item" [style.height]="selectedType.value === 'poi' ? '24px' : '48px'"
        *ngIf="selectedType.value !== 'emissiveOverlay'">
        <span>内容</span>
        <textarea cols="4" (keydown)="onKeyDown($event)" [(ngModel)]="content" placeholder="请输入文字"></textarea>
      </div>
      <div class="drop-item" style="margin-top: 12px;" *ngIf="selectedType.value === 'Marker'">
        <span>对齐方式</span>
        <div>
          <app-dropdown [options]="alignOptions" [(ngModel)]="selectedAlign"></app-dropdown>
        </div>
      </div>
      <div class="drop-item" style="margin-top: 12px;" *ngIf="selectedType.value === 'emissiveOverlay'">
        <span>类型</span>
        <div>
          <app-dropdown [options]="emissiveOptions" [(ngModel)]="selectedEmissive"></app-dropdown>
        </div>
      </div>
      <div class="drop-item" style="margin-top: 12px;" *ngIf="selectedType.value === 'poi'">
        <span>类型</span>
        <div>
          <app-dropdown (select)="resetPoiIcon($event)" [options]="iconTypeOption" [(ngModel)]="selectedIconType"></app-dropdown>
        </div>
      </div>
      <div class="drop-item" style="margin-top: 12px;" *ngIf="selectedType.value === 'poi' && selectedIconType.value !== 'POI水滴'">
        <span>图标</span>
        <div>
          <app-dropdown [options]="iconOptions1" [(ngModel)]="selectedIcon"></app-dropdown>
        </div>
      </div>
      <div class="drop-item" style="margin-top: 12px;" *ngIf="selectedType.value === 'poi' && selectedIconType.value === 'POI水滴'">
        <span>图标</span>
        <div>
          <app-dropdown [options]="iconOptions2" [(ngModel)]="selectedIcon"></app-dropdown>
        </div>
      </div>
      <div class="input-item">
        <span>颜色</span>
        <input [(ngModel)]="color" type="color" />
      </div>
      <div class="input-item" *ngIf="selectedType.value === 'emissiveOverlay'">
        <span>旋转角度</span>
        <div class="coordinate-items">
          <div class="coordinate-item">
            <span>X</span>
            <app-input-number [(ngModel)]="rotationX" [min]="-180" [max]="180"></app-input-number>
          </div>
          <div class="coordinate-item">
            <span>Y</span>
            <app-input-number [(ngModel)]="rotationY" [min]="-180" [max]="180"></app-input-number>
          </div>
          <div class="coordinate-item">
            <span>Z</span>
            <app-input-number [(ngModel)]="rotationZ" [min]="-180" [max]="180"></app-input-number>
          </div>
        </div>
      </div>
      <div class="input-item">
        <span>缩放</span>
        <app-input-number [(ngModel)]="scale" [min]="0" [max]="100"></app-input-number>
      </div>
      <div class="input-item" *ngIf="selectedType.value !== 'emissiveOverlay'">
        <span>不透明度</span>
        <app-input-number [(ngModel)]="opacity" [min]="0" [max]="1"></app-input-number>
      </div>
      <div class="input-item" *ngIf="selectedType.value === 'Marker'">
        <span>边框大小</span>
        <app-input-number [(ngModel)]="borderWidth" [min]="0" [max]="1"></app-input-number>
      </div>
      <div class="input-item" *ngIf="selectedType.value === 'Marker'">
        <span>边框颜色</span>
        <input [(ngModel)]="borderColor" type="color" />
      </div>
      <div class="input-item" *ngIf="selectedType.value === 'emissiveOverlay'">
        <span>自发光强度</span>
        <app-input-number [(ngModel)]="emission" [min]="0"></app-input-number>
      </div>
      <div class="input-item" *ngIf="selectedType.value === 'emissiveOverlay'">
        <span>速度</span>
        <app-input-number [(ngModel)]="speed" [min]="0"></app-input-number>
      </div>
      <div class="btn-item">
        <span></span>
        <button (click)="create()">创建</button>
      </div>
    </div>
  </app-content-block>
  <div style="margin-top: 20px;">
    <app-content-block width="true" caption="覆盖物列表">
      <div class="scroll">
        <ng-container *ngFor="let overlay of overlays; index as i">
          <div class="overlay-list" (click)="selectOverlay(overlay)">
            <div class="overlay-item" [class.selected]="selectedId === overlay.id">
              <span>{{overlay.type === 'poi' ? overlay.content : overlay.type === 'Marker' ? overlay.title : overlay.icon}}</span>
              <div class="overlay-info">
                <span>{{overlay.type === 'poi' ? 'POI' : overlay.type === 'Marker' ? '标签' : 'Emissive'}}</span>
                <div class="overlay-delete" (click)="delete($event, overlay)">
                  <img src="assets/icon/overlay/delete.png" />
                </div>
              </div>
            </div>
          </div>
        </ng-container>
      </div>
    </app-content-block>
  </div>
</main>
